@charset "utf-8";

/* 引入重置样式 */
//@import "./css/reset.css;

// REM
@function r($px){
    @return ($px/40) * 1rem;    
}

// 减半
@function half($px){
    @return ($px/2) * 1px;    
}


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body{
    height: 100%;
    position: relative;
}

//头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
//    background: red;
    padding:half(17) half(23) half(10);
    box-sizing: border-box;
    .logo{
        width:half(123);
        height:half(123);
        overflow: hidden;
        a{
            display: block;
            width: 100%;
            height: 100%;
        }
        img{
            width: 100%;
                  height:half(123);     
        }
    }
 

    .searchBar{
        
        margin: half(36) auto 0;
        width: r(266);
        height: half(51);
        border:1px solid #ff9344;
        border-radius: half(51);
        overflow: hidden;
        input[type="search"]{
            width: calc( 100% - 35px);
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: 12px;
            font-size: 12px;
        }
        input[type="image"]{
            height: half(36);
            vertical-align: top;
            margin-top: 4px;
        }
        
    }
    
 .selectBar{
     margin-top: half(31);
     width: half(159);
     height: half(56);
     border:1px  solid #ff9344;
     background-image: url(../img/xiala.png);
     background-repeat: no-repeat;
     background-position: right 4px center;
     background-size: 15px 8px;
     select{
         padding-left: 8px;
         -webkit-appearance: none;
         appearance: none;
         border: none;
         width: 100%;
         height: 100%;
         display: block;
         background: transparent; 
     }
     
 }   
    
}
section{
    position: absolute;
    top: half(150);
    bottom:half(135);

    width: r(750);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;  
    .bg{
        position: relative;
      width: 100%;
      height: r(285);
//      background-image: url(../img/bg.png);
//      background-repeat: no-repeat;
//      background-size: contain;
        img{
            width: r(750);
            height:r(285);
        }
        p{ 
             position: absolute;
            left: 0;
            top: 54%;
            width: 100%;
            height: r(30);
            background-color: #100d0f;
          opacity: 0.5;
        
       
    }
            span{
                margin: 0 auto;
                display: block;
                width: r(140);
                height: r(30);
                font-size: r(29);
                line-height: r(30);
               color: white;
                text-align: center;        
                      position: absolute;
            left:40%;
            top: 54%;
            position: absolute;
            span{
                    position: absolute;
            left:0;
            top: 0;
            display: block;
                 width: r(140);
                height: r(30);
                 background: #9D9D9D;
               opacity: 0.4;
            }
            }
        
    }
    
    .youhui{
        width: r(750);
        height: half(105);
         background: white;   
        padding-left:half(21);
        padding-top: half(32);
        box-sizing: border-box;
        .youhui_logo{
            display: inline-block;
            width: half(220);
            height: half(62);
            vertical-align: top;
            img{
                width: half(56);
                height: half(54);
          
            }
            p{
                 // width: r(125);
                box-sizing: border-box;
                height: half(54);
                font-family: MicrosoftYaHei;
                font-size: half(30);
                font-weight: normal;
                font-stretch: normal;
                line-height: half(54);
                padding-left: half(8);
                color: #000000;
            }
        }
    }
    
        .youhui_more{
            display: inline-block;
            vertical-align: top;
            width: half(100);
            height: half(31);
            margin-top: half(19);
            margin-right: half(20);
            p{
                width:half(60);
                height: half(31);
                line-height:half(31);
                font-size: half(24);
                color: #000000;
                font-family: MicrosoftYaHei;
            }
            img{
                margin-left: half(8);
                width: half(25);
                height:half(31);
            }
        }
    .youhuibox{
        width: 100%;
        height: r(228); 
        margin-top: r(12);
            .boxr{
            width: 100%;
            height: 50%;
                       .sbox{                   
                        width: 50%;
                        height: 100%;
                                img{
                                    width: r(241);
                                    height: r(94);
                                    display: block;
                                   margin: 0 auto;
                                }
                        }
                        .zb{
                            box-sizing: border-box;
                            padding-left: r(40);
                        }
                        .rb{
                            box-sizing: border-box;
                            padding-right: r(49);
                        }
            }
            
    }    
        
       .shangjia{
           width: 100%;
           height:r(190) ;     	
               img{
                   margin-top: r(23);
                   margin-left: r(16);
               width: r(211);
               height: r(164);
               }
        .introduce{
                margin-left: r(14);
                width: r(390);
                 height: 100%;             
                    h1{ margin-top: r(28);
                            width: 100%;
                            height: r(31);
                            font-family: MicrosoftYaHei;
                            font-size: r(31);
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: r(31);
                            letter-spacing: 0px;
                            color: #000000;
                    }
                    h2{
                        margin-top: r(18);
                        width:250;
                        height: r(27);
                        font-family: MicrosoftYaHei;
                          font-size: r(22);
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: r(27);
                        letter-spacing: 0px;
                        color: #494949;
                        span{
                            margin-left: 2px;
                            box-sizing: border-box;
                            display: inline-block;
                            width: r(150);
                             height: r(25);
                              font-size: r(22);
                                padding-top: r(2);
                        }
                    }
                    h3{
                            margin-top: r(22);
                            width: r(410);
                            height: r(32);
                            font-family: MicrosoftYaHei;
                            font-size: r(32);
                            font-weight: normal;
                            font-stretch: normal;
                            line-height:  r(32);
                            letter-spacing: 0px;
                            color: #ff9344;
                    }
                    
                    
                 }   
        
           .intRight{
               width: r(115);
               height: 100%;
               h1{  
                   margin-top: r(35);
                   text-align: center;
                   width: 100%;
                    height: r(25);
                    font-family: MicrosoftYaHei;
                    font-size: r(22);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: r(25);
                    letter-spacing: 0px;
                    color: #494949;
               }
               
               
               h2{ 
                   margin-top: r(60);
                   width: 100%;
                    height:r(25);
                    font-family: MicrosoftYaHei;
                    font-size: r(22);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: r(25);
                    letter-spacing: 0px;
                    color: #494949;
                   
               }
               
               
           }
       }   
       
       
       
}    


//底部
footer{
   
    position: absolute;
    bottom: 0;
    width:r(750);
    height: half(150);   
    .foot{   
        box-sizing: border-box;
        padding-top: half(17);
        width:r(187.5);
        height: half(150);
        background: transparent;
        img{display: block;
            width: half(71);
            height: half(73); 
            margin:0 auto;
            margin-top: half(5);
        }
        p{  height: half(35);
            font-size: half(25);          
            padding-top: half(10);
            text-align: center;
               a{
                color: black;
            }
        }
    }
}
